<template>
    <div class="newObjectList">
        <div class="crumbs">
            <el-breadcrumb separator=">">
                <el-breadcrumb-item>
                    <i class="el-icon-folder"></i> 项目部管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>进行中项目</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <div class="title">进行中项目</div>
                <el-button
                    type="primary"
                    class="titleBtn"
                    icon="el-icon-plus"
                    @click="addNewObject"
                >重新上报</el-button>
                <el-button type="primary" class="titleBtn1">导出</el-button>
            </div>
            <div class="project">
                <div class="titleName">
                    <div class="projectId">
                        <div>项目ID</div>
                        <div>ZJ123</div>
                    </div>
                    <div class="projectName">
                        <div>项目名称</div>
                        <div>德清县污水零直排项目</div>
                    </div>
                </div>
                <div class="projectContent">
                    <el-row span="24" border>
                        <el-col span="8" class="colList">
                            <div>登录密码</div>
                            <div>123456</div>
                        </el-col>
                        <el-col span="8" class="colList">
                            <div>合同总产值</div>
                            <div>400万</div>
                        </el-col>
                        <el-col span="8" class="colList">
                            <div>所属事业部</div>
                            <div>事业二部</div>
                        </el-col>
                    </el-row>
                    <el-row span="24">
                        <el-col span="8" class="colList">
                            <div>工期</div>
                            <div>24个月</div>
                        </el-col>
                        <el-col span="8" class="colList">
                            <div>关联ID</div>
                            <div>xxx</div>
                        </el-col>
                        <el-col span="8" class="colList">
                            <div>类型</div>
                            <div>管线</div>
                        </el-col>
                    </el-row>
                    <el-row span="24">
                        <el-col span="8" class="colList">
                            <div>开工时间</div>
                            <div>2020.01.23</div>
                        </el-col>
                        <el-col span="8" class="colList">
                            <div>区域(省)</div>
                            <div>浙江</div>
                        </el-col>
                        <el-col span="8" class="colList">
                            <div>实施状态</div>
                            <div>进行中</div>
                        </el-col>
                    </el-row>
                    <el-row span="24" class="doing">
                        <el-col span="24">
                            <span>操作</span>
                            <div class="textBtn">
                                <el-button
                                    type="text"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >产能信息表</el-button>
                                <el-button
                                    type="text"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >细化分解表</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import { fetchData } from '../../api/index';
export default {
    // name: 'basetable',
    data() {
        return {};
    },
    created() {},
    methods: {}
};
</script>

<style lang="scss" scoped>
.container {
    min-height: 600px;
     padding-left:30px;
}
.handle-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.title {
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
}
.titleBtn {
    background: rgba(208, 2, 27, 1);
    color: #fff;
    border: none;
    font-size: 16px;
    width: 109px;
    height: 35px;
    text-align: center;
    margin-left: 66px;
}
.titleBtn1 {
    background: rgba(0, 79, 171, 0.2);
    color: rgba(0, 79, 171, 1);
    border: none;
    width: 90px;
    height: 35px;
    margin-left: 25px;
}
.project {
    // border:1px solid #eee;
     max-width: 850px;
    padding-left:30px;
    .titleName {
        height: 80px;
        width:583px;
        line-height: 80px;
        font-size: 20px;
        // border: 1px solid #eee;
        display: flex;
         justify-content: space-between;
        align-items: center;
        .projectId,.projectName{
          // width:350px;
          display: flex;
         
          div:nth-child(2){
            color:#666;
            margin-left:28px;
            // padding-left:28px
          }
        }  
    }
    
      
 }
    .projectContent{
        width:840px;
        /deep/ .el-col {
          height:44px;
          line-height: 44px;
          color:#333;
          font-size:16px;
          padding-left:22px;
         background:rgba(184,216,255,0.05);
         border:1px solid rgba(184,216,255,1);
         overflow:hide;
         margin-top:-1px;
         margin-left:-1px;
         display: flex;
         align-items: center;
        }
        .colList{
          div:nth-child(1){
            flex:2;
            color:#333;
            font-weight: 500;
          }
          div:nth-child(2){
            flex:3;
            font-size: 14px;
            font-weight: 400;
            color:#666;
          }
        }
        .textBtn{
          margin-left:65px;
        }
        
    }
</style>
